// 导出router-view的虚拟DOM
export default {
  name: 'RouterView',
  render (h) {
    // 路由信息对象 { matched, path }
    const route = this.$route
    // 记录使用到的组件 仅有一层路由 直接获取
    let depth = 0

    // /music/pop  存储 /music  /music/pop
    // 第一次加载父组件  设置routerview
    this.routerView = true
    // 子组件的时候获取父组件
    let parent = this.$parent

    while (parent) {
      console.log(this.$route.path)
      console.log(this)
      console.log(parent)
      if (parent.routerView) {
        // 存在父组件routerview为true depth=1 下方可获取到子组件
        depth++
      }
      // 可能有多层嵌套 返回上一层加载
      parent = parent.$parent
    }

    // 按位置获取路由表中的对象
    const record = route.matched[depth]
    if (record) {
      // console.log(h(record.component))
      return h(record.component)
    }
    return h()
  }
}
